{% extends "base.html" %}
{% load thumbnail %}
{% block title %}{{ user.get_full_name }}{% endblock %}
{% block content %}
    <h1>{{ user.get_full_name }}</h1>
    <div class="profile-info">
        {% thumbnail user.profile.photo "180x180" crop="100%" as im %}
            <img src="{{ im.url }}" class="user-detail">
        {% endthumbnail %}
    </div>
    {% with total_followers=user.followers.count %}
        <span class="count">
<span class="total">{{ total_followers }}</span>
follower{{ total_followers|pluralize }}
</span>
        <a href="#" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow"
           class="follow button">
            {% if request.user not in user.followers.all %}
                Follow
            {% else %}
                Unfollow
            {% endif %}
        </a>
        <div id="image-list" class="image-container">
            {% include "images/image/list_ajax.html" with images=user.images_created.all %}
        </div>
    {% endwith %}
{% endblock %}

{% block domready %}
$('a.follow').click(function (e) {
    e.preventDefault();
    $.post('{% url 'account:user_follow' %}', {
            id: $(this).data('id'),
            action: $(this).data('action')
        },
        function (data) {
            if (data['status'] === 'ok') {
                let previous_action = $('a.follow').data('action');
                // 切换 data-action 属性
                $('a.follow').data('action', previous_action === 'follow' ? 'unfollow' : 'follow');
                // 切换按钮文字
                $('a.follow').text(previous_action === 'follow' ? 'unfollow' : 'follow');
                // 更新关注人数
                let previous_followers = parseInt($('span.count .total').text());
                $('span.count .total').text(previous_action === 'follow' ? previous_followers + 1 : previous_followers - 1);
            }
        }
    );
});
{% endblock %}